import {
  Modal,
  TouchableOpacity,
  StyleSheet,
  View,
  Text,
  Dimensions,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import RootSiblings from 'react-native-root-siblings';
import React, {Component} from 'react';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
/**
 * props:
 * options: [{name: '', id: ''}]
 */
export default class PickerComp extends Component {
  state = {
    selectedValue: '',
    modalVisible: false,
  };
  showModal = () => {
    this.mask = new RootSiblings(<View style={styles.maskStyle} />);
    this.setState({
      modalVisible: true,
    });
  };

  hideModal = () => {
    this.setState({
      modalVisible: false,
    });
    if (this.mask instanceof RootSiblings) {
      this.mask.destroy();
    }
  };
  setSetectValue = itemValue => {
    this.setState({
      selectedValue: itemValue,
    });
    this.props.onChange && this.props.onChange(itemValue);
  };
  handleConfirm = () => {
    const {options} = this.props;
    const {selectedValue} = this.state;
    let name = selectedValue;
    if (!name && options.length) {
      name = options[0].name;
      this.setState({
        selectedValue: name,
      });
    }
    const option = options.find(item => item.name === name);
    if (option) {
      const id = option.id;
      this.props.onChange &&
        this.props.onChange({
          name,
          id,
        });
    }
    this.hideModal();
  };

  handleCancel = () => {
    this.setState({
      selectedValue: this.prevSelectedValue || this.props.selectedValue || '',
    });
    this.hideModal();
  };
  render() {
    const {modalVisible, selectedValue} = this.state;
    const {options} = this.props;
    return (
      <Modal
        animationType="side"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => this.setState({modalVisible: false})}>
        <View style={styles.modalStyle}>
          <View style={styles.modalHeader}>
            <TouchableOpacity
              style={styles.headerBtn}
              onPress={this.handleCancel}>
              <Text style={styles.headerText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.headerBtn}
              onPress={this.handleConfirm}>
              <Text style={styles.headerText}>确认</Text>
            </TouchableOpacity>
          </View>
          <Picker
            selectedValue={selectedValue}
            onValueChange={(itemValue, itemIndex) =>
              this.setSetectValue(itemValue)
            }>
            {options.map(item => {
              return (
                <Picker.Item
                  label={item.name}
                  value={item.name}
                  key={item.id}
                />
              );
            })}
          </Picker>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  maskStyle: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    width: width,
    height: height,
  },
  modalStyle: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: width,
    flex: 1,
    backgroundColor: '#ffffff',
    zIndex: 99,
  },
  modalHeader: {
    height: 50,
    backgroundColor: '#f5f5f5',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerBtn: {
    height: 50,
    width: 80,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    fontSize: 18,
    color: '#5196FD',
  },
  pickWrap: {
    width: 90,
    height: 50,
    borderRadius: 2,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#f5f5f5',
    justifyContent: 'center',
    alignItems: 'center',
  },
  pickItem: {
    fontSize: 14,
    color: '#b2b2b2',
  },
  pickItemActive: {
    color: '#333',
  },
});
